<!-- 表格 -->
<template>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 96% ;margin-left:30px; "
      @selection-change="handleSelectionChange"
      border 
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
    <el-table-column type="selection" width="55" />
        <el-table-column label="编号" width="100" >
            <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="用户名"  >
            <template #default="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="员工姓名"  >
            <template #default="scope">{{ scope.row.staffname }}</template>
        </el-table-column>
        <el-table-column label="部门名称"  >
            <template #default="scope">{{ scope.row.sectionname }}</template>
        </el-table-column>
        <el-table-column label="模块名称"  >
            <template #default="scope">{{ scope.row.modulename }}</template>
        </el-table-column>
        <el-table-column label="登录IP"  >
            <template #default="scope">{{ scope.row.IPa }}</template>
        </el-table-column>
        <el-table-column label="登录时间"  >
            <template #default="scope">{{ scope.row.logdate }}</template>
        </el-table-column>
        <el-table-column label="功能"  >
            <template #default="scope">{{ scope.row.functiona }}</template>
        </el-table-column>
        <el-table-column label="操作时间"  >
            <template #default="scope">{{ scope.row.operatedate }}</template>
        </el-table-column>
        <el-table-column label="操作状态"  >
            <template #default="scope">{{ scope.row.operatestate }}</template>
        </el-table-column>
        <el-table-column label="终端名称"  >
            <template #default="scope">{{ scope.row.terminalname }}</template>
        </el-table-column>
        <el-table-column label="退出时间"  >
            <template #default="scope">{{ scope.row.dropdate }}</template>
        </el-table-column>
    </el-table> 
  </template>
  
  <script lang="ts">
  import { ref,defineComponent, reactive} from 'vue'
  import { ElTable } from 'element-plus'
  export default defineComponent({
    name:"SystemLogTable",
    props:['tableDataa'],
    setup(props,ctx){
    interface User {
    id: number,
      username:string,
      staffname:string,
      sectionname:string,
      modulename:string,
      IPa:string,
      logdate:string,
      functiona:string,
      operatedate:string,
      operatestate:string,
      terminalname:string,
      dropdate:string,
  }
  
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const multipleSelection = ref<User[]>([])
  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
  }
  let tableData: User[] = props.tableDataa
  return{
    tableData,multipleTableRef,handleSelectionChange
  }
  }
}
)
  </script>